import * as echarts from '../../ec-canvas/echarts';
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置

const apiserverUrl = require('../../config').apiserverUrl;
const ExamResultUrl = require('../../config').ExamResultUrl;
const ExamPieChartUrl = require('../../config').ExamPieChartUrl;
const ExamBarChartUrl = require('../../config').ExamBarChartUrl;

const app = getApp();
Page({
  onShareAppMessage: function (res) {

  },
  data: {
    loading: true,
    isadmin: false,
    userList: [],
    inputShowed: false,
    inputVal: "",
    tabs: ["人员统计", "部门统计"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    papersid: 0,
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  },
  onLoad: function (options) {
    this.setData({ papersid: options.papersid });
    this.ecPieComponent = this.selectComponent('#mychart-dom-pie');
    this.ecPieComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      this.setPieChart(chart);
      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;
      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
    this.getExamResult("");

    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });

  },
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
    if (e.currentTarget.id == 1) {
      this.ecBarComponent.init((canvas, width, height) => {
        // 获取组件的 canvas、width、height 后的回调函数
        // 在这里初始化图表
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        this.setBarOption(chart);
        // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
        this.chart = chart;
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return chart;
      });
    }
  },
  onReady: function () {
    // 获取组件
    this.ecBarComponent = this.selectComponent('#mychart-dom-bar');
  },
  getExamResult(keywords) {
    wx.request({
      method: "post",//请求数据用get，添加数据post，修改数据put
      url: apiserverUrl,
      data: {
        method: "GET", url: ExamResultUrl, data: {
          papersid: this.data.papersid,
          keywords: keywords
        }
      },
      header: {
        "Content-Type": "application/json"
      },
      success: res => {
        if (res.data.IsSuccess) {
          this.setData({ userList: res.data.Data, loading: false });
        }
      }
    });
  },
  setBarOption: function (chart) {
    wx.request({
      method: "post",//请求数据用get，添加数据post，修改数据put
      url: apiserverUrl,
      data: {
        method: "GET", url: ExamBarChartUrl, data: {
          papersid: this.data.papersid
        }
      },
      header: {
        "Content-Type": "application/json"
      },
      success: res => {
        if (res.data.IsSuccess) {
          const option = {
            color: ['#c39c61', '#c1272d'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            legend: {
              data: ['及格', '不及格']
            },
            grid: {
              left: 20,
              right: 20,
              bottom: 15,
              top: 40,
              containLabel: true
            },
            xAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#c39c61'
                  }
                },
                axisLabel: {
                  color: '#c39c61'
                }
              }
            ],
            yAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                data: res.data.Data.yAxisData,
                axisLine: {
                  lineStyle: {
                    color: '#999'
                  }
                },
                axisLabel: {
                  color: '#666'
                }
              }
            ],
            series: [
              {
                name: '及格',
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    show: true,
                    position: 'inside'
                  }
                },
                data: res.data.Data.seriesData[0],
              },
              {
                name: '不及格',
                type: 'bar',
                stack: '总量',
                label: {
                  normal: {
                    show: true,
                    position: "left"
                  }
                },
                data: res.data.Data.seriesData[1]
              }
            ]
          };
          chart.setOption(option);
        }
      }
    });
  },
  setPieChart: function (chart) {
    wx.request({
      method: "post",//请求数据用get，添加数据post，修改数据put
      url: apiserverUrl,
      data: {
        method: "GET", url: ExamPieChartUrl, data: {
          papersid: this.data.papersid
        }
      },
      header: {
        "Content-Type": "application/json"
      },
      success: res => {
        if (res.data.IsSuccess) {
          const option = {
            backgroundColor: "#ffffff",
            color: ["#c39c61", "#c1272d"],
            series: [{
              label: {
                normal: {
                  fontSize: 14
                }
              },
              type: 'pie',
              center: ['50%', '50%'],
              radius: [0, '60%'],
              data: [{
                value: res.data.Data[0].value,
                name: res.data.Data[0].name
              }, {
                value: res.data.Data[1].value,
                name: res.data.Data[1].name
              }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 2, 2, 0.3)'
                }
              }
            }]
          };
          chart.setOption(option);
        }
      }
    });
  }
})
